<script lang="ts" setup>
import { computed } from 'vue';
import { useLocale } from '@/locale/locale';

const { t } = useLocale();

const props = defineProps<{
  disabled: boolean;
  title?: string;
  atLeast?: string;
  startDate?: string;
  endDate?: string;
}>();

const description = computed(() => {
  if (props.atLeast) {
    return t('LAKey_couponAvailableForOrMore').replace('{0}', props.atLeast || '0');
  } else {
    return t('LAKey_couponNoUsageLimit');
  }
});

const date = computed(() => {
  if (!props.startDate || !props.endDate) {
    return t('LongTermValidity');
  } else {
    return `${props.startDate.split(' ')[0]}-${props.endDate.split(' ')[0]}`;
  }
});
</script>

<template>
  <view :class="{ 'is-disabled': disabled }" class="coupon-meta">
    <view class="mb-1_5 text-lg text-primary font-medium truncate">{{ title }}</view>
    <view class="mb-1 text-xs text-fourth">{{ description }}</view>
    <view class="text-xs text-fourth">{{ date }}</view>
  </view>
</template>

<style lang="scss">
.coupon-meta {
  width: 220px;
  margin: 0 16rpx;

  &.is-disabled {
    & .text-primary,
    & .text-fourth {
      color: #c4c4c4;
    }
  }
}
</style>
